<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
    .trm-wen{border: 1px solid #949494;border-radius: 4px;}
    .trm-wbn{height:25px;line-height: 25px;margin-top:10px;}
    #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color:#949494;  z-index:10;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
</style>
<body style="background-color: #ececec;">
<div class="container">
    <div class="row" style=" height: 50px;padding-top:10px;padding-bottom: 10px;">
        <div class="col-xs-12" style="position: absolute;width: 100%;z-index: 11;">
            <form action="">
                <div style="width: 80%;float:left;background-color: #fff;height:30px;line-height:33px;border-radius: 5px;">
                    <span style="margin-left:5%"><i class="glyphicon glyphicon-search"></i></span>
                    <span style="line-height:0px;"><input type="text" placeholder="搜索书名" style="outline:none;border:none;"></span>
                    <span style="float:right;margin-right: 5%;"><i class="glyphicon glyphicon-remove-circle"></i></span>
                </div>
                <div style="float:left;margin-left:5%;line-height: 33px;color: #3299ff">
                    <buttom>搜索</buttom>
                </div>
            </form>
        </div>
    </div>
</div>
<div style="position: absolute;width: 100%;z-index: 11;">
    <div class="container" style="position: absolute;width: 100%;">
        <div class="row" style="padding-bottom: 10px;padding-top:10px;background-color: #fff;text-align: center">
            <div class="col-xs-4">
                最热
            </div>
            <div class="col-xs-4">
                最新
            </div>
            <div class="col-xs-4" id="show">
                筛选
            </div>
        </div>
    </div>
    <div style="margin-top:40px;"></div>
    <div class="container" id="dens" style="display: none;">
        <div class="row" style=";height:30px;padding-top:10px;background-color: #fff;">
            <div class="col-xs-3" style="height: 20px;">
                分类
            </div>
        </div>
        <div class="row" style=" height:50px;height:auto;background-color: #fff;text-align: center;padding-bottom: 50px;">
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    绘本
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    语言故事
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    童话
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    科普
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    3D
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    VR
                </div>
            </div>
            <div class="col-xs-3 trm-wbn">
                <div class="trm-wen">
                    故事汇 <a href=""><i class="glyphicon glyphicon-headphones"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-top:38px;"></div>
<div id="bg"></div>
<div class="container" style="z-index: 10;width: 100%">
    <div class="row" style=" height:135px;padding-top:10px;background-color: #fff;text-align: center;margin-top: 1px;">
        <div class="col-xs-5">
            <img src="imgs/book.jpg" alt="" style="width:100%;height:117px;">
        </div>
        <div class="col-xs-3" style="line-height:25px;padding-right: 0px;">
            <div style="font-weight:bold"><h4>我们的身体</h4></div>
            <div>书架：307</div>
            <div>在架：3本</div>
        </div>
        <div class="col-xs-4" style="height:117px;line-height:40px;">
            <div style="padding-top:20px;width:100%;">
                <div>
                    <i class="glyphicon glyphicon-star-empty" style="font-size:20px;float: right;margin-right: 15px;"></i>
                </div>
            </div>
            <br>
            <div style="width: 50px;float: right">
                <img src="imgs/hear.jpg" alt="" style="width:100%;">
            </div>
        </div>
    </div>
    <div class="row" style=" height:135px;padding-top:10px;background-color: #fff;text-align: center;margin-top: 1px;">
        <div class="col-xs-5">
            <img src="imgs/book.jpg" alt="" style="width:100%;height:117px;">
        </div>
        <div class="col-xs-3" style="line-height:25px;padding-right: 0px;">
            <div style="font-weight:bold"><h4>我们的身体</h4></div>
            <div>书架：307</div>
            <div>在架：3本</div>
        </div>
        <div class="col-xs-4" style="height:117px;line-height:40px;">
            <div style="padding-top:20px;width:100%;">
                <div>
                    <i class="glyphicon glyphicon-star-empty" style="font-size:20px;float: right;margin-right: 15px;"></i>
                </div>
            </div>
            <br>
            <div style="width: 50px;float: right">
                <img src="imgs/hear.jpg" alt="" style="width:100%;">
            </div>
        </div>
    </div>
    <div class="row" style=" height:135px;padding-top:10px;background-color: #fff;text-align: center;margin-top: 1px;">
        <div class="col-xs-5">
            <img src="imgs/book.jpg" alt="" style="width:100%;height:117px;">
        </div>
        <div class="col-xs-3" style="line-height:25px;padding-right: 0px;">
            <div style="font-weight:bold"><h4>我们的身体</h4></div>
            <div>书架：307</div>
            <div>在架：3本</div>
        </div>
        <div class="col-xs-4" style="height:117px;line-height:40px;">
            <div style="padding-top:20px;width:100%;">
                <div>
                    <i class="glyphicon glyphicon-star-empty" style="font-size:20px;float: right;margin-right: 15px;"></i>
                </div>
            </div>
            <br>
            <div style="width: 50px;float: right">
                <img src="imgs/hear.jpg" alt="" style="width:100%;">
            </div>
        </div>
    </div>
</div>
<script>
    $("#show").on('click',function(){
        $("#dens").show();
        document.getElementById("bg").style.display ="block";
    })
</script>
</body>
</html>